<template>
	<el-dialog
	  title="修改属性"
	  :visible.sync="dialogVisible"
	  @close="close"
	  width="80%"
	  >
	  
	  <el-form ref="form" :model="form" label-width="80px">
	    <el-form-item label="名字">
	      <el-input :disabled="true" v-model="form.name"></el-input>
	    </el-form-item>
		<el-form-item label="图片">
		  <el-upload
		    action="#"
		    list-type="picture-card"
			ref="upload"
			:file-list="filelist"
			:on-change="change"
		    :auto-upload="false">
		      <i slot="default"  class="el-icon-plus"></i>
		      <div slot="file"  slot-scope="{file}">
		        <img
		          class="el-upload-list__item-thumbnail"
		          :src="file.url" alt=""
		        >
		        <span class="el-upload-list__item-actions">
		          <span
		            class="el-upload-list__item-preview"
		            @click="handlePictureCardPreview(file)"
		          >
		            <i class="el-icon-zoom-in"></i>
		          </span>
		          <span
		            v-if="!disabled"
		            class="el-upload-list__item-delete"
		            @click="handleDownload(file)"
		          >
		            <i class="el-icon-download"></i>
		          </span>
		          <span
		            v-if="!disabled"
		            class="el-upload-list__item-delete"
		            @click="handleRemove(file)"
		          >
		            <i class="el-icon-delete"></i>
		          </span>
		        </span>
		      </div>
		  </el-upload>
		</el-form-item>
	    <el-form-item label="活动时间">
	      <el-col :span="11">
	        <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
	      </el-col>
	    </el-form-item>

	    <el-form-item label="内容">
	      <el-input type="textarea" v-model="form.content"></el-input>
	    </el-form-item>
	    <el-form-item>
	      <el-button type="primary" @click="onSubmit">确定</el-button>
	      <el-button>重置</el-button>
	    </el-form-item>
	  </el-form>
	</el-dialog>
</template>

<script>
	import {posteditNews} from '@/api/data.js'
  export default {
    data() {
      return {
        dialogVisible: false,
		form: {
			name: '',
			date: '',
			image: '',
			title: '',
			content:''
		},
		filelist:[],
		disabled: false
      }
    },
    methods: {
		onSubmit() {
			this.dialogVisible = false;
			posteditNews(this.form).then(res=>{
				this.$root.$emit('emit',res)
			});
		},
		handleRemove(file) {
			file.url = '';
			this.$refs.upload.clearFiles()
		},
		//图片上的那个加号
		handlePictureCardPreview(file) {
			this.form.image = file.url;
		},
		handleDownload(file) {
			console.log(file);
		},
		change(file,filelist){
			this.filelist=[];
			this.filelist.push({url:file.url});
			this.form.image = file.url;
		},
		close(){
			this.filelist=[];
			this.$refs.upload.clearFiles()
		}
    },
	mounted() {
		this.$root.$on('dialogVisible',res=>{
			this.form=res;
			this.filelist.push({url:res.image})
			this.dialogVisible = true;
		})
	}
  };
</script>>

<style scoped="scoped">
</style>
